<template>
  <div class="screen">
    <div class="back">
      <router-link to="/" style="display:flex;align-items:center;">
        <svg t="1608448284439" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2561" width="200" height="200"><path d="M766.976 1021.952c-10.24 0-20.48-3.584-28.672-10.752L228.352 538.624c-15.872-14.336-15.872-38.4 0-52.736L738.304 13.312c15.872-14.336 40.96-14.336 56.832 0s15.872 38.4 0 52.736L313.856 512l481.28 445.952c15.872 14.336 15.872 38.4 0 52.736-7.68 7.168-17.92 11.264-28.16 11.264z" fill="#2c2c2c" p-id="2562"></path></svg>
        返回
      </router-link>
    </div>
    <div class="content">
      <div class="left">
        <div class="title">
          内容设置
        </div>
        <div style="display:flex;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="电话号码">
              <el-input v-model="form.hm" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="通话时间">
              <el-date-picker
                v-model="form.thsj"
                type="datetime"
                placeholder="选择日期时间"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="归属地区">
              <el-input v-model="form.gsd"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="title">
          可选内容
        </div>
        <div style="display:flex;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="通话时长" class="oneline">
              <div class="infoswitch">
                <el-switch v-model="formauto.thsc"></el-switch>
                <div class="switchinfo">随机</div>
              </div>
              <el-input v-model="form.thsc"></el-input>
            </el-form-item>
            <el-form-item label="手机电量" class="oneline">
              <div class="infoswitch">
                <el-switch v-model="formauto.dl"></el-switch>
                <div class="switchinfo">随机</div>
              </div>
              <el-input v-model="form.dl"></el-input>
            </el-form-item>
            <el-form-item label="手机网速" class="oneline">
              <div class="infoswitch">
                <el-switch v-model="formauto.ws"></el-switch>
                <div class="switchinfo">随机</div>
              </div>
              <el-input v-model="form.ws"></el-input>
            </el-form-item>
            <el-form-item label="手机时间" class="oneline">
              <div class="infoswitch">
                <el-switch v-model="formauto.sj"></el-switch>
                <div class="switchinfo">自动</div>
              </div>
              <el-input v-model="form.sj"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div @click="savecanvas" class="savebtn">下载截图</div>
      </div>
      <div class="right">
        <div class="phone">
          <canvas id="canvas"></canvas>
          <img class="border" src="@/assets/phoneborder.png">
        </div>
      </div>
    </div>
    <transition name="loadanim">
      <div class="loadanim" v-if="saveLoading">
        <img src="@/assets/load.svg">
        <div class="info">{{ loadinginfo }}</div>
      </div>
    </transition>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      saveLoading: false,
      loadinginfo: '',
      form: {
        ws: this.RandomNumBoth(1,128),
        dl: this.RandomNumBoth(80,95),
        sj: this.getRandomSj(),
        hm: '13024681357',
        gsd: '北京丰台区',
        thsc: `${this.RandomNumBoth(40,59)} 秒`,
        thsj: new Date()
      },
      formauto: {
        thsc: true,
        dl: true,
        ws: true,
        sj: true
      }
    }
  },
  methods: {
    savecanvas() {
      let canvas = document.getElementById("canvas");
      canvas.toBlob(blob => {
        saveAs(blob, `${this.form.hm}.png`);
      });
    },
    RandomNumBoth(Min,Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.round(Rand * Range); //四舍五入
      return num;
    },
    getRandomSj() {
      let date = new Date(new Date().getTime() + this.RandomNumBoth(100000, 10000000));
      return `${date.getHours()}:${date.getMinutes().toString().length == 1 ? '0' + date.getMinutes() : date.getMinutes()}`;
    },
    xuanran() {
      let _this = this
      let context = document.getElementById("canvas").getContext("2d")
      context.clearRect(0,0,context.width,context.height)

      let img = new Image()
      img.src = require('../../assets/phone.png')
      
      img.onload = function() {
        context.drawImage(img, 0, 0)
        context.textBaseline = "top"

        // 网速
        context.textAlign = "left"
        context.font = "27px 'qingyuan'"
        context.fillStyle = "#666"
        context.fillText(_this.form.ws, 178, 17)

        // 电量
        context.textAlign = "left"
        context.font = "27px 'qingyuan'"
        context.fillStyle = "#4b4b4b"
        context.fillText(_this.form.dl, 876, 32)

        let showSj = "";
        if(_this.formauto.sj && _this.form.thsj != null) {
          let sj = _this.form.sj;
          let sjdate = new Date(_this.form.thsj.getTime() + _this.RandomNumBoth(100000, 10000000));
          showSj = `${sjdate.getHours()}:${sjdate.getMinutes().toString().length == 1 ? '0' + sjdate.getMinutes() : sjdate.getMinutes()}`;
        } else {
          showSj = _this.form.sj;
        }
        // 时间
        context.textAlign = "left"
        context.font = "37.4px 'qingyuan'"
        context.fillStyle = "#686868"
        context.fillText(showSj, 954, 25)

        // 号码加空格
        let showhm = "";
        _this.form.hm = _this.form.hm.replace(/\s/g,""); // 去除空格
        let hm2 = _this.form.hm;
        if(/^\d*$/.test(hm2)) {  // 仅数字
          if(hm2.length >= 1 && hm2.length <=3) {
            showhm = hm2;
          }else if(hm2.length >= 4 && hm2.length <= 7) {
            showhm = `${hm2.substring(0,3)} ${hm2.substring(3,hm2.length)}`;
          }else if(hm2.length >= 8 && hm2.length <= 11) {
            showhm = `${hm2.substring(0,3)} ${hm2.substring(3,7)} ${hm2.substring(7,hm2.length)}`;
          }else if(hm2.length == 0){
            showhm = "不可为空";
          }else {
            showhm = "长度溢出";
          }
        }

        // 号码1
        context.textAlign = "center"
        context.font = "89px 'qingyuan'"
        context.fillStyle = "#181818"
        context.fillText(showhm, 540, 720)

        // 号码2
        context.textAlign = "left"
        context.font = "49.4px 'qingyuan'"
        context.fillStyle = "#181818"
        context.fillText(showhm, 68, 1182)

        // 号码3
        context.textAlign = "left"
        context.font = "42px 'qingyuan'"
        context.fillStyle = "#9e9e9e"
        context.fillText(showhm, 116, 1598)

        // 归属地
        context.textAlign = "left"
        context.font = "42px 'qingyuan'"
        context.fillStyle = "#686868"
        context.fillText(_this.form.gsd, 70, 1260)

        // 日期转换
        let showThsj = ""
        if(_this.form.thsj != null) {
          let thsjDate = new Date(_this.form.thsj);
          showThsj = `${thsjDate.getMonth()+1}月${thsjDate.getDate()}日 ${thsjDate.getHours() < 12 ? '上午' : '下午'}${thsjDate.getHours()}:${thsjDate.getMinutes().toString().length == 1 ? '0' + thsjDate.getMinutes() : thsjDate.getMinutes()}`;
        }else {
          showThsj = "不可为空"
        }
        
        // 通话时间
        context.textAlign = "left"
        context.font = "48px 'qingyuan'"
        context.fillStyle = "#181818"
        context.fillText(showThsj, 70, 1520)

        // 通话时长
        context.textAlign = "left"
        context.font = "42px 'qingyuan'"
        context.fillStyle = "#686868"
        context.fillText(_this.form.thsc, 910, 1554)
      }
    },
    save() {
      var canvas = document.getElementById("canvas")

      var link = document.createElement("a");
      var imgData =canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
      var objurl = URL.createObjectURL(blob);
      link.download = this.form.hm + ".png";
      link.href = objurl;
      link.click();
      
      function  dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      }
    }
  },
  async mounted() {
    let context = document.getElementById("canvas").getContext("2d")
    canvas.width = 1080
    canvas.height = 2280

    context.font = "32px qingyuan";
    await document.fonts.load(context.font);
    context.fillText("加载中", 20, 100);

    this.xuanran()
  },
  watch: {
    form: {
      handler: function(val, oldVal) {
        this.xuanran()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: "qingyuan";
    src: url("../../assets/font/qingyuanmin.ttf");
  }

  $min-width: 1250px;

  .screen {
    background: #f6f7f9;
    min-height: calc(100vh - 60px);
    padding-bottom: 30px;
    .back {
      display: flex;
      align-items: center;
      width: $min-width;
      margin: 0 auto;
      padding-top: 20px;
      svg {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        path {
          fill: #202124;
        }
      }
    }
    .content {
      display: flex;
      width: $min-width;
      min-height: 50vh;
      margin: 0 auto;
      padding-top: 20px;
      .left, .right {
        width: 48%;
      }
      .left {
        padding-left: 100px;
        .title {
          font-size: 16px;
          line-height: 50px;
        }
        .info {
          display: flex;
          align-items: center;
          padding: 5px 8px;
          font-size: 12px;
          border-radius: 3px;
          background: #CDE0FF;
          line-height: 20px;
          svg {
            width: 30px;
            height: 30px;
            margin-right: 5px;
          }
        }
        .demoimg {
          width: calc(100% - 2px);
          margin-top: 30px;
          border: 1px dashed #aaa;
        }
        .text {
          width: 100%;
          height: 30px;
          text-indent: 10px;
          border-radius: 3px;
          border: 1px solid #aaa;
        }
        .btn {
          padding: 0 8px;
          border-radius: 3px;
          border: 1px solid #aaa;
          background: #eee;
          cursor: pointer;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .phone {
          position: relative;
          width: 350px;
          height: 676px;
          overflow: hidden;
          .border {
            position: absolute;
            top: 0;
            width: 100%;
          }
          #canvas {
            position: absolute;
            top: 3%;
            left: 4.5%;
            width: 90%;
          }
        }
        img {
          width: 300px;
        }
        .info {
          color: #a8aeb8;
        }
        .imglist {
          width: 100%;
          height: 100%;
          padding: 10px;
          margin: 17px 0 20px 0;
          border: 3px dashed #ddd;
          border-radius: 10px;
          .mainlist {
            display: flex;
            flex-wrap: wrap;
            .jximg {
              width: 100px;
              margin: 10px;
              display: flex;
              flex-direction: column;
              align-items: center;
              .img {
                width: 100px;
                height: 100px;
                background-color: #eee;
              }
              .info {
                font-size: 12px;
                line-height: 26px;
              }
            }
          }
        }
      }
    }
    .savebtn {
      margin: 50px 0 20px 90px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #fff;
      width: 140px;
      height: 44px;
      border-radius: 24px;
      background: linear-gradient(136deg,#0160fe,#1bb3ff 50%,#0160fe);
      box-shadow: #3b74ff5e 0 5px 16px;
    }
    .loadanim {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      z-index: 20;
      position: fixed;
      top: 0;
      left: 0;
      background: #000000dd;
      img {
        width: 100%;
        margin-top: -10vh;
      }
      .info {
        color: #fff;
        font-size: 20px;
      }
    }
  }

  .loadanim-enter-active {
    transition: all .5s;
  }
  .loadanim-enter {
    opacity: 0;
  }
  .loadanim-enter-to {
    opacity: 1;
  }
  .loadanim-leave-active {
    transition: all .5s ease-out;
  }
  .loadanim-leave-to {
    opacity: 0;
  }
</style>

<style lang="scss">
  .screen {
    .el-form-item__label {
      text-align: left;
    }
    .el-form-item {
      margin-bottom: 12px;
    }
    .el-form-item.oneline {
      .el-form-item__content {
        display: flex;
        align-items: center;
        .el-switch {
          margin-right: 10px;
        }
        .infoswitch {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          line-height: 16px;
          .switchinfo {
            text-indent: -8px;
            font-size: 12px;
            color: #b3b5b9;
          }
        }
        .el-input {
          width: 190px;
        }
      }
    }
    .el-input {
      width: 240px;
    }
  }
</style>